<template>
	<view>
		<view class="text-center pt-5 mb-5 font-weight-bold fs-32" style="padding-top: 20vh;">{{type == 'return'?'':'提货码'}}
		</view>
		<view class="flex mx-auto rounded-lg invite_code">
			<image class="mx-auto" :src="qrcodeUrl" mode="widthFix" show-menu-by-longpress @click="handleClick"
				style="width: 300px;height: 300px;"></image>
			<canvas id="qrcode" canvas-id="qrcode" class="mx-auto position-absolute" style="width: 300px;height: 300px;" />
		</view>
		<view class="text-center mt-4 fs-28">长按保存二维码</view>
	</view>
</template>

<script>
	// 生成二维码
	import uQRCode from '@/components/uqrcode/uqrcode.js'
	import {
		getOrderDetail
	} from "@/api/order.js";
	export default {
		data() {
			return {
				sn: '',
				type: '',
				qrcodeUrl: ''
			}
		},
		onLoad(options) {
			this.loadData(options.sn);
			this.sn = options.sn;
			this.type = options.type
			uni.setNavigationBarTitle({
				title: this.type == 'return' ? '归还' : "提货",
			});
		},
		methods: {
			handleClick() {
				uni.previewImage({
					urls: [this.qrcodeUrl], // 预览图片数组（支持多张）
					current: this.qrcodeUrl // 当前预览图片
				});
			},
			async loadData(sn) {
				uni.showLoading({
					title: "加载中",
				});
				getOrderDetail({
					id: sn
				}).then((res) => {
					this.order = res.data;
					if (this.$store.state.isShowToast) {
						uni.hideLoading()
					};
					this.showQrcode()
				}).finally(() => {
					uni.hideLoading()
				});

			},
			/** 生成二维码 */
			showQrcode(data) {
				const text = `${this.sn}&${this.type}`
				this.$nextTick(() => {
					uQRCode.make({
							canvasId: 'qrcode',
							componentInstance: this,
							size: 300,
							margin: 10,
							text: text,
							backgroundColor: '#ffffff',
							foregroundColor: '#000000',
							fileType: 'png',
							errorCorrectLevel: uQRCode.errorCorrectLevel.H
						})
						.then(res => {
							console.log(res)
							this.qrcodeUrl = res.tempFilePath
						})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	#qrcode {
		left: -999px;
		z-index: -1;
	}
</style>